<template>
  <!-- 样式自定义通过class去定义 -->
  <!-- 大小宽度:style -->
  <!-- Collapse 折叠面板
  https://element-plus.youqua.cn/zh-CN/component/menu.html#collapse-%E6%8A%98%E5%8F%A0%E9%9D%A2%E6%9D%BF -->
  <el-menu
    :style="{ width: !isCollapse ? '230px' : '64px', transition: 'width 0.3s ease-in-out' }"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="aside-container"
    default-active="2"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >
    <p class="logo-lg">
      {{ !isCollapse ? 'DD陪审' : 'DD' }}
    </p>
    <!-- <treeMenu :meunData="meunData"/> -->
    <!-- 标签v-bind里面的元素会传递给子标签 -->
    <treeMenu v-bind:meunData="meunData" :index="1" />
  </el-menu>
</template>

<script setup>
import treeMenu from "./treeMenu.vue";
import { useRouter } from "vue-router";
import { reactive, computed } from "vue";
import { useStore } from "vuex";

// router实例
const router = useRouter();
console.log(router, "router");

// 拿到meunData就可以通过父子组件通信传递给上面的子组件标签模板
const meunData = reactive(router.options.routes[0].children);

const store = useStore();
console.log("****", store, "store");

const isCollapse = computed(() => store.state.menu.isCollapse);

// vue3语法糖函数
const handleOpen = () => {};
const handleClose = () => {};
</script>

<style lang="less" scoped>
// 高度集成父级100%
.aside-container {
  height: 100%;
  .logo-lg {
    font-size: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #fff;
  }
}
</style>